<template>
  <t-card :bordered='false'>
    <!--返回按钮-->
    <t-button theme='primary' style='margin-bottom: 10px;' @click='$router.back()'>
      <template #icon>
        <ArrowLeftIcon />
      </template>
      返回
    </t-button>
    <t-form
      ref='form'
      :data='formData'
      :rules='FORM_RULES'
      label-align='top'
      :label-width='100'
      @reset='onReset'
      @submit='onSubmit'
    >
      <div class='form-basic-container'>
        <div class='form-basic-item'>
          <div class='form-basic-container-title'>志愿者招募活动发布</div>
          <!-- 表单内容 -->

          <t-row class='row-gap'>
            <t-col :span='12'>
              <t-form-item label='救助活动' name='type'>
                <t-select
                  v-model='formData.type'
                  :style="{ width: '666px' }"
                  placeholder='请选择类型'
                  class='demo-select-base'
                  clearable
                >
                  <t-option v-for='(item, index) in typeOptions' :key='index' :value='item.value' :label='item.label'>
                    {{ item.label }}
                  </t-option>
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :span='12'>
              <t-form-item label='招募要求' name='name'>
                <t-textarea v-model='formData.desci' :style="{ width: '666px' }" placeholder='请输入救助活动名称' />
              </t-form-item>
            </t-col>


            <t-col :span='6'>
              <t-form-item label='甲方' name='partyA'>
                <t-select
                  v-model='formData.partyA'
                  :style="{ width: '322px' }"
                  class='demo-select-base'
                  placeholder='请选择类型'
                  clearable
                >
                  <t-option v-for='(item, index) in partyAOptions' :key='index' :value='item.value' :label='item.label'>
                    {{ item.label }}
                  </t-option>
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :span='6'>
              <t-form-item label='乙方' name='partyB'>
                <t-select
                  v-model='formData.partyB'
                  :style="{ width: '322px' }"
                  placeholder='请选择类型'
                  class='demo-select-base'
                  clearable
                >
                  <t-option v-for='(item, index) in partyBOptions' :key='index' :value='item.value' :label='item.label'>
                    {{ item.label }}
                  </t-option>
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :span='6'>
              <t-form-item label='宠物出生日期' name='signDate'>
                <t-date-picker
                  v-model='formData.signDate'
                  :style="{ width: '322px' }"
                  theme='primary'
                  mode='date'
                  separator='/'
                />
              </t-form-item>
            </t-col>
            <!--<t-col :span="6">
              <t-form-item label="合同生效日期" name="startDate">
                <t-date-picker
                  v-model="formData.startDate"
                  :style="{ width: '322px' }"
                  theme="primary"
                  mode="date"
                  separator="/"
                />
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item label="合同结束日期" name="endDate">
                <t-date-picker
                  v-model="formData.endDate"
                  :style="{ width: '322px' }"
                  theme="primary"
                  mode="date"
                  separator="/"
                />
              </t-form-item>
            </t-col>-->
            <t-col :span='6'>
              <t-form-item label='' name='files'>
                <t-upload
                  v-model='formData.files'
                  action='https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo'
                  tips='请上传宠物图片，大小在5M以内'
                  :size-limit="{ size: 60, unit: 'MB' }"
                  :format-response='formatResponse'
                  :before-upload='beforeUpload'
                  @fail='handleFail'
                >
                  <t-button class='form-submit-upload-btn' variant='outline'> 上传宠物图片</t-button>
                </t-upload>
              </t-form-item>
            </t-col>
          </t-row>

          <div class='form-basic-container-title form-title-gap'>其它信息</div>

          <t-form-item label='备注' name='comment'>
            <t-textarea v-model='formData.comment' :height='124' placeholder='请输入备注' />
          </t-form-item>
          <!--<t-form-item label="公证人">
            <t-avatar-group>
              <t-avatar>D</t-avatar>
              <t-avatar>S</t-avatar>
              <t-avatar>+</t-avatar>
            </t-avatar-group>
          </t-form-item>-->
        </div>
      </div>

      <div class='form-submit-container'>
        <div class='form-submit-sub'>
          <div class='form-submit-left'>
            <t-button theme='primary' class='form-submit-confirm' type='submit'> 提交</t-button>
            <t-button type='reset' class='form-submit-cancel' theme='default' variant='base'> 取消</t-button>
          </div>
        </div>
      </div>
    </t-form>
  </t-card>
</template>
<script>
import { prefix } from '@/config/global'
import { ArrowLeftIcon } from 'tdesign-icons-vue'

const INITIAL_DATA = {
  name: '',
  type: '',
  partyA: '',
  partyB: '',
  signDate: '',
  startDate: '',
  endDate: '',
  payment: '1',
  amount: 0,
  comment: '',
  files: []
}
const FORM_RULES = {
  name: [{required: true, message: '请输入合同名称', type: 'error'}],
  type: [{required: true, message: '请选择合同类型', type: 'error'}],
  payment: [{required: true, message: '请选择合同收付类型', type: 'error'}],
  amount: [{required: true, message: '请输入合同金额', type: 'error'}],
  partyA: [{required: true, message: '请选择甲方', type: 'error'}],
  partyB: [{required: true, message: '请选择乙方', type: 'error'}],
  signDate: [{required: true, message: '请选择日期', type: 'error'}],
  startDate: [{required: true, message: '请选择日期', type: 'error'}],
  endDate: [{required: true, message: '请选择日期', type: 'error'}]
}

export default {
  name: 'FormBase',
  components: {
    ArrowLeftIcon
  },
  data () {
    return {
      prefix,
      stepSuccess: true,
      formData: {...INITIAL_DATA},
      FORM_RULES,
      typeOptions: [
        {label: '田化村第十三次义务救助活动', value: '1'},
        {label: '救助天河壹号小区通风井小猫', value: '2'},
        {label: '天海街保护流浪动物宣传', value: '3'},
        {label: '为流浪动物做检查', value: '4'},
      ],
      partyAOptions: [
        {label: '无', value: '4'},
        {label: 'A', value: '1'},
        {label: 'B', value: '2'},
        {label: 'C', value: '3'}
      ],
      partyBOptions: [
        {label: '无', value: '4'},
        {label: 'A', value: '1'},
        {label: 'B', value: '2'},
        {label: 'C', value: '3'}
      ],
      textareaValue: '',
      rules: {
        name: [{required: true, message: '请输入宠物名称', type: 'error'}],
        type: [{required: true, message: '请选择宠物类型', type: 'error'}],
        payment: [{required: true, message: '宠物类型', type: 'error'}],
        amount: [{required: true, message: '请输入合同金额', type: 'error'}],
        partyA: [{required: true, message: '请选择甲方', type: 'error'}],
        partyB: [{required: true, message: '请选择乙方', type: 'error'}],
        signDate: [{required: true, message: '请选择宠物出生日期', type: 'error'}],
        startDate: [{required: true, message: '请选择日期', type: 'error'}],
        endDate: [{required: true, message: '请选择日期', type: 'error'}]
      }
    }
  },
  methods: {
    handleFail ({file}) {
      this.$message.error(`文件 ${ file.name } 上传失败`)
    },
    beforeUpload (file) {
      if (!/\.(png)$/.test(file.name)) {
        this.$message.warning('请上传png格式的图片')
        return false
      }
      return true
    },
    // 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址
    formatResponse (res) {
      return {...res, error: '上传失败，请重试', url: res.url}
    },
    changeStatus () {
      this.stepSuccess = !this.stepSuccess
    },
    onReset () {
      this.$message.warning('取消新建')
    },
    onSubmit ({validateResult}) {
      if (validateResult === true) {
        this.$message.success('新建成功')
      }
    }
  }
}
</script>
<style lang='less' scoped>
@import '@/style/variables.less';

.form-basic-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--td-bg-color-container);
  padding: 0 32px 134px;

  @media (max-width: @screen-sm-max) {
    padding: 0 32px 67px;

    .form-basic-container-title {
      margin: 32px 0 32px;
    }
  }

  .form-basic-item {
    width: 676px;

    .form-basic-container-title {
      font-size: 20px;
      line-height: 24px;
      color: var(--td-text-color-primary);
      margin: var(--td-comp-size-xxxl) 0 32px;
    }
  }
}

.form-submit-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 28px;
  background-color: var(--td-bg-color-component);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;

  .form-submit-sub {
    width: 676px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .form-submit-left {
      .form-submit-upload-span {
        font-size: 14px;
        line-height: 22px;
        color: var(--td-text-color-placeholder);
        padding-top: 8px;
        display: inline-block;
      }
    }
  }
}

</style>
